<template>
  <div class="login-page">
    <div class="login-left">
      <div class="login-bg"></div>
    </div>
    <div class="login-right">
      <div class="login-box">
        <div class="login-logo">
          <img src="../assets/img/login_logo.png" alt>
        </div>
        <div class="login-xian">
          <span>
            <i class="login-ileft"></i>欢迎登录
            <i class="login-iright"></i>
          </span>
        </div>
        <div class="login-title">钛客云后台管理系统</div>
        <div class="login-wrapper">
          <div class="input-box">
            <i class="iconfont icon-zhanghu iconfonts" :class="{focus:icon.username}"></i>
            <input
              type="text"
              name="username"
              class="input"
              v-model.trim="account.username"
              placeholder="账户"
              @focus="icon.username=true;"
              @blur="icon.username=false;"
              @click="inputborderError=false;errorTip=''"
              :class="{'inputBorder':icon.username, 'inputBordererror':inputborderError}"
            >
            <i
              class="iconfont icon-shanchu"
              v-if="account.username != '' "
              @click="account.username = '';inputborderError=false;errorTip=''"
            ></i>
          </div>
          <div class="input-box">
            <i class="iconfont icon-mima iconfonts" :class="{focus:icon.userpassword}"></i>
            <input
              type="password"
              name="password"
              class="input"
              v-model.trim="account.userpassword"
              placeholder="密码"
              @focus="icon.userpassword=true;"
              @blur="icon.userpassword=false;"
              @click="inputborderError=false;errorTip=''"
              @keyup.enter="LoginButton"
              :class="{'inputBorder':icon.userpassword,'inputBordererror':inputborderError }"
            >
            <i
              class="iconfont icon-shanchu"
              v-if="account.userpassword != '' "
              @click="account.userpassword = '';inputborderError = false;errorTip = ''"
            ></i>
          </div>
          <div class="input-checked">
            <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
          </div>
          <div class="input-error">{{ errorTip }}</div>
          <div class="input-button" v-loading="loading">
            <button
              class="button"
              :class="{'buttonbackground':( account.username && account.userpassword ) }"
              :disabled="( account.username=='' ||  account.userpassword=='' )"
              @click="LoginButton"
            >登录</button>
          </div>
        </div>
        <!-- <div class="login-official "><a href="http://www.qurongjinfu.com/">@初租</a></div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { Base64 } from "js-base64";
import md5 from "md5";

export default {
  data() {
    return {
      account: {
        username: "",
        userpassword: ""
      },
      icon: {
        username: false,
        userpassword: false
      },
      inputborderError: false,
      checked: true,
      errorTip: "",
      loading: false
    };
  },
  methods: {
    LoginButton() {
      let that = this;
      let username = that.account.username.trim();
      let password = that.account.userpassword.trim();
      let user = username + ":" + password;
      let authorization = "Basic " + Base64.encode(user);
      that.ajaxJson({
        url: "/login",
        headers: {
          Authorization: authorization
        },
        data: {
          name: username,
          password: md5(password)
        },
        success: function(data) {
          if (data.code == "0") {
            if (that.checked) {
              that.localData("set", "login_auth", Base64.encode(user));
            } else {
              that.localData("clean", "login_auth");
            }
            that.localData("set", "login_user", data.data);
            that.localData("set", "urlPermissions", data.data.urlPermissions);
            that.$store.dispatch("newAppId", data.data.supportApps[0].key);
            that.$router.push({ path: "/index" });
          } else {
            that.errorTip = data.message;
            that.inputborderError = true;
          }
        }
      });
    }
  },
  created() {
    let that = this;
    let user_auth = that.localData("get", "login_auth");
    if (user_auth) {
      that.account.username = Base64.decode(user_auth).split(":")[0];
      that.account.userpassword = Base64.decode(user_auth).split(":")[1];
    }
  }
};
</script>
<style lang="less">
.login-page {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .login-left {
    flex: 1;
    .login-bg {
      width: 100%;
      height: 100%;
      background: url("../assets/img/login_pic.png") no-repeat center center;
      background-size: cover;
      img {
        display: block;
        width: 100%;
      }
    }
  }
  .login-right {
    position: relative;
    width: 480px;
    background: #ffffff;
    .login-box {
      position: absolute;
      top: 50%;
      left: 70px;
      margin-top: -289px;
      width: 340px;
      height: auto;
      .login-logo {
        width: 150px;
        height: 150px;
        margin: 0 auto 30px;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .login-xian {
        width: 100%;
        span {
          display: block;
          font-size: 22px;
          color: #333333;
          letter-spacing: 0;
          text-align: center;
          line-height: 30px;
          margin-bottom: 10px;
          i {
            display: block;
            width: 80px;
            height: 1px;
            background: #dddddd;
          }
          .login-ileft {
            float: left;
            margin-top: 15px;
          }
          .login-iright {
            float: right;
            margin-top: 15px;
          }
        }
      }
      .login-title {
        font-size: 14px;
        color: #999999;
        letter-spacing: 0;
        line-height: 20px;
        text-align: center;
        margin-bottom: 50px;
      }
      .login-wrapper {
        .input-box {
          width: 340px;
          height: 44px;
          margin-bottom: 20px;
          position: relative;
          .iconfonts {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 30px;
            font-size: 22px;
            color: #ccc;
          }
          .input {
            width: 292px;
            padding-left: 48px;
            border: 1px solid #dddddd;
            height: 44px;
            font-size: 14px;
            color: #999999;
            outline: none;
          }
          .focus {
            color: #1f96f6;
          }
          .focus[data-content]::after {
            content: attr(data-content);
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            z-index: 22;
            color: #1f96f6;
            mask-image: linear-gradient(-90deg, #1f96f6 0%, #42d2ff 100%);
          }
          .inputBorder {
            border: 1px solid #69b6f2;
          }
          .inputBordererror {
            border: 1px solid #69b6f2;
          }
          .icon-shanchu {
            position: absolute;
            top: 12px;
            right: 10px;
            width: 20px;
            font-size: 18px;
            color: #ccc;
            right: 10px !important;
          }
        }
        .input-checked {
          width: 100%;
          height: 22px;
        }
        .input-error {
          margin: 15px 0;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: #ff0000;
        }
        .input-button {
          width: 100%;
          .button {
            width: 100%;
            height: 46px;
            outline: none;
            border: none;
            background-image: linear-gradient(-90deg, #cccccc 0%, #dddddd 100%);
            font-size: 20px;
            color: #ffffff;
            letter-spacing: 10px;
            line-height: 46px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 1s;
          }
          .button:hover {
            background-image: linear-gradient(-90deg, #b7b7b7 0%, #c6c6c6 100%);
            box-shadow: 0 5px 20px 0 rgba(207, 207, 207, 0.5);
          }
          .buttonbackground {
            background-image: linear-gradient(-90deg, #1f96f6 0%, #42d2ff 100%);
          }
          .button.buttonbackground:hover {
            background-image: linear-gradient(-90deg, #1f96f6 0%, #42d2ff 100%);
            box-shadow: 0 5px 20px 0 rgba(35, 139, 254, 0.3);
          }
        }
      }
      .login-official {
        margin: 60px 0 0;
        text-align: center;
        a {
          color: #69b6f2;
          font-size: 12px;
          letter-spacing: 0;
        }
      }
    }
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #666;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #666;
    border-color: #666;
  }
  .el-checkbox__inner:hover {
    border-color: #333;
  }
  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #333;
  }
}
</style>
